import React from 'react'
import "./index.css"
import { nanoid } from 'nanoid';
export default function Header({todoList, setTodoList}) {

  // 发布事件函数
   const addTodoList = (e) => {
    //判断点击的是不是回车键
    if(e.keyCode !== 13) return;
    //获取输入的内容
    const InputContent = e.target.value.trim();
    //判断输入不能为空
    if(!InputContent) return alert("输入不能为空");
    //添加数据
    const newData  = { id: nanoid(), todo: InputContent, done: false };
    setTodoList([newData,...todoList])
    //用户输入完清空输入的内容
    e.target.value = '';
   }
  return (
    <div className="todo-header">
      <input type="text" onKeyUp={addTodoList} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
